var wsServer = 'ws://127.0.0.1:8811';
var websocket = new WebSocket(wsServer);
websocket.onopen = function (evt) {
    websocket.send( 'hello-ws' ); // 向ws 发送消息
    console.log("Connected to WebSocket server.");
};

websocket.onclose = function (evt) {
    console.log("Disconnected");
};

websocket.onmessage = function (evt) {
    console.log('Retrieved data from server: ' + evt.data);
    push( evt.data )

    // var d1 = document.getElementById('match-result');
    // d1.insertAdjacentHTML('afterend', '<p>server_msg:&nbsp;' + evt.data + '</p>');
};

websocket.onerror = function (evt, e) {
    console.log('Error occured: ' + evt.data);
};

function push( json ) {
    var data = JSON.parse( json );
    console.log('into push function ' + data.type);
    html = '<div class="frame">' +
                '<h3 class="frame-header">' +
                    '<i class="icon iconfont icon-shijian"></i>第' + data.type + '节 01：30' +
                '</h3>' +
                '<div class="frame-item">' +
                    '<span class="frame-dot"></span>' +
                    '<div class="frame-item-author">' +
                        '<img src="' + data.logo + '" width="20px" height="20px" />' + data.title +
                    '</div>' +
                    '<p>' + data.content + '</p>';
    if ( data.image ) {
        html += '<p><img src="' + data.image + '" style="width: 100px;height: 100px;"/></p>';
    }

    html += '</div></div>';

    // $("#match-result").prepend( html );
    var d1 = document.getElementById('match-result');
    d1.insertAdjacentHTML('afterend', html);
}